<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页</title>
    <link rel="stylesheet" type="text/css" href="/static/h+/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/h+/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="/static/h+/css/animate.css">
    <link rel="stylesheet" type="text/css" href="/static/h+/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/first.css">
</head>
<body class="gray-bg">
<div id="main">
  <div class="title">当日数据汇总</div>
  <div class="content">
    <div class="fk1">
      <div class="t">新增激活设备数</div>
      <div class="c">
        <span><img src="/static/img/icon_1.png"></span>
        <span><h2>{$devs}</h2><small class="{if($diff>0)}l{else/}r{/if}">比昨日设备数：{$diff}</small></span>
      </div>
    </div>
    <div class="fk1">
      <div class="t">当日流水数据(元)</div>
      <div class="c">
        <span><img src="/static/img/icon_2.png"></span>
        <span><h2>{$ords}</h2><small class="l">昨日流水：{$ords2}</small></span>
      </div>
    </div>
    <div class="fk1">
      <div class="t">新增付费金额</div>
      <div class="c">
        <span class="tc"><h2>{$ords_n}</h2><small class="l">昨日新增付费金额：{$ords2_n}</small></span>
      </div>
    </div>
    <div class="fk1">
      <div class="t">新增付费设备数</div>
      <div class="c">
        <span class="tc"><h2>{$count}</h2><small class="l">昨日新增付费设备数：{$count2}</small></span>
      </div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="title">全部数据汇总</div>
  <div class="content">
    <div class="fk1">
      <div class="t">激活设备数</div>
      <div class="c">
        <span><img src="/static/img/icon_1.png"></span>
        <span><h2 class="tw"><b>{$total}</b></h2></span>
      </div>
    </div>
    <div class="fk1">
      <div class="t">流水数据(元)</div>
      <div class="c">
        <span><img src="/static/img/icon_2.png"></span>
        <span><h2 class="tw"><b>{$amount}</b></h2></span>
      </div>
    </div>
    <div class="fk1">
      <div class="t">平台论坛用户数</div>
      <div class="c">
        <span><img src="/static/img/icon_1.png"></span>
        <span><h2><small class="l">2019年：</small>{$lasty}</h2><h2><small class="l">总数：</small>{$totaluser}</h2></span>
      </div>
    </div>
    <div class="fk1">
      <div class="t">平台论坛阅读量</div>
      <div class="c">
        <span><img src="/static/img/icon_2.png"></span>
        <span><h2><small class="l">总数：</small>7010741</h2></span>
      </div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="title">
    <a href="javascript:;" data-day="6" class="f">7日</a><a href="javascript:;" data-day="14">15日</a><a href="javascript:;" data-day="29">30日</a><a href="javascript:;" data-day="44">45日</a><a href="javascript:;" data-day="59">60日</a><a href="javascript:;" data-day="74">75日</a><a href="javascript:;" data-day="89">90日</a>
  </div>
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-sm-6">
        <div class="ibox float-e-margins">
          <div class="ibox-content">
            <div class="echarts" id="device"></div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="ibox float-e-margins">
          <div class="ibox-content">
            <div class="echarts" id="hysb"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-sm-6">
        <div class="ibox float-e-margins">
          <div class="ibox-content">
            <div class="echarts" id="users"></div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="ibox float-e-margins">
          <div class="ibox-content">
            <div class="echarts" id="order"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="cgday"><img src="/static/layer/skin/default/loading-0.gif"></div>
</body>
<script type="text/javascript" src="/static/h+/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/echarts-4.2.1/dist/echarts.min.js"></script>
<script type="text/javascript">
    $(function(){
        function chart($obj, $title, $dates, $data) {
            var $charts = echarts.init(document.getElementById($obj));
            var $option = {
                title : {
                    text: $title
                },
                tooltip : {
                    trigger: 'axis'
                },
                calculable : true,
                xAxis : {
                    type : 'category',
                    boundaryGap : false,
                    data : $dates
                },
                yAxis : {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value}'
                    },
                    axisLabel : {
                        formatter: function($v){
                            if ($v >= 1000) {
                                $v = ($v/1000) + 'K';
                            }
                            return $v;
                        }
                    }
                },
                series : [
                    {
                        type:'line',
                        data:$data,
                        smooth: true,
                        color:'#4ddb61',
                        lineStyle:{
                            color:'#4ddb61'
                        }
                    }
                ]
            };
            $charts.setOption($option);
            $(window).resize($charts.resize);
        }
        chart('device', '新增设备数', [{$data['dates']}], [{$data['dcts']}]);
        chart('hysb', '活跃设备', [{$data['dates']}], [{$data['ucts']}]);
        chart('users', '活跃用户(人)', [{$data['dates']}], [{$data['lcts']}]);
        chart('order', '充值金额走势', [{$data['dates']}], [{$data['octs']}]);

        $('.title a').click(function(){
            $('.cgday').css('display', 'block')
            var $day = $(this).data('day');
            $('.title a').removeClass('f');
            $(this).addClass('f')
            $.ajax({
                type: 'post', dataType: 'json', cache: false,
                url: '/admin/getdata',
                data: {'day': $day},
                success: function($data){
                    chart('device', '新增设备数', $data.dates, $data.dcts);
                    chart('hysb', '活跃设备', $data.dates, $data.ucts);
                    chart('users', '活跃用户(人)', $data.dates, $data.lcts);
                    chart('order', '充值金额走势', $data.dates, $data.octs);
                    $('.cgday').css('display', 'none')
                }
            })
        })
    })
</script>
</html>